<div class="bg">
  <div class="container">
    <mat-card class="panel-withdraw">
      <mat-card-title class="df" style="display:flex;"
        ><i
          style="outline:none"
          [routerLink]="['/assets/lists']"
          class="icon iconfont"
          >&#xe616;</i
        >
        {{ "assets.withdraw" | translate: lang }}</mat-card-title
      >
      <mat-card-content style="margin-top: -4px;">
        <form
          class="df jcsb"
          [formGroup]="validateForm"
          (ngSubmit)="onSubmit()"
        >
          <div class="lt">
            <div class="hd">
              <div style="width:200px">
                <app-coin-select
                  (onChange)="onChangeCoin($event)"
                ></app-coin-select>
              </div>
            </div>
            <div class="bd">
              <div class="i df">
                <div class="l">{{ "assets.total" | translate: lang }}</div>
                <div class="r">
                  <input readonly type="text" formControlName="total" />
                </div>
              </div>

              <div class="i df">
                <div class="l">{{ "assets.ava" | translate: lang }}</div>
                <div class="r">
                  <input readonly type="text" formControlName="ava" />
                </div>
              </div>

              <div class="i df">
                <div class="l">{{ "assets.frozen" | translate: lang }}</div>
                <div class="r">
                  <input readonly type="text" formControlName="frozen" />
                </div>
              </div>

              <div class="i df">
                <div class="l">{{ "assets.pass_fee" | translate: lang }}</div>
                <div class="r">
                  <input
                    [textMask]="pointMask"
                    readonly
                    type="text"
                    formControlName="passFee"
                  />
                </div>
              </div>

              <div class="i df">
                <div class="l">
                  {{ "assets.receive_amount" | translate: lang }}
                </div>
                <div class="r">
                  <input
                    [textMask]="pointMask"
                    readonly
                    type="text"
                    formControlName="receiveAmount"
                  />
                </div>
              </div>
            </div>
            <div class="ft">
              <div
                style="margin-top: 21px;
              margin-bottom: 12px;"
              >
                <i class="icon iconfont" style="color:#F7931A;margin:10px 0;">
                  &#xe612;
                </i>
              </div>
              <mat-card-content
                [params]="{
                  min: assets.withdraw.min,
                  max: assets.withdraw.max,
                  coin: assets.coin
                }"
                l10nTranslate
                style="font-family: PingFangSC-Regular;
                            font-size: 12px;
                            color: #EDA007;
                            letter-spacing: -0.29px;width:421px;height:92px;line-height: 24px;"
              >
                assets.withdraw_tip
                <!-- Please don't deposit any other digital assets except BTC to the
                above address. Depositing to the above address requires
                confirmations of the entire network. It will arrive after 2
                confirmations. Minimum deposit amount: 0.001 BTC. It won't be
                credited less than 0.001 BTC. -->
              </mat-card-content>
            </div>
          </div>
          <div class="rt">
            <!--
                  <div class="i">
                    <mat-form-field style="width:100%">
                      <mat-select
                        placeholder="{{'assets.withdraw_address' | translate:lang}}"
                        disableOptionCentering
                        formControlName="address"
                      >
                        <mat-option
                          ><button
                            (click)="toAddress()"
                            style="width:100%"
                            mat-stroked-button
                          >
                            {{ "assets.add_withdraw_address" | translate: lang }}
                          </button>
                        </mat-option>
                        <mat-option
                          *ngFor="let item of assets.withdraw.addressLists"
                          [value]="item.address"
                        >
                          {{ item.coin }}:{{ item.address }}:{{ item.remark }}
                        </mat-option>
                      </mat-select>
                      <mat-error
                        *ngIf="validateForm.controls.address.hasError('required')"
                      >
                        {{ "assets.error.address" | translate: lang }}
                      </mat-error>
                    </mat-form-field>
                  </div>
                -->

            <div class="i">
              <div class="h" l10nTranslate>assets.withdraw_address_title</div>
              <div class="b eh-select">
                <mat-select
                  placeholder="{{ 'App.please_select' | translate: lang }}"
                  (blur)="onBlurAddress()"
                  disableOptionCentering
                  formControlName="address"
                  (click)="onClickAddress()"
                >
                  <mat-option
                    *ngFor="let item of withdrawAddressLists"
                    [value]="item.address"
                  >
                    <span
                      >{{ item.coin }}:{{ item.address }}:{{
                        item.remark
                      }}</span
                    >
                    <button
                      style="float: right;height: 42px;"
                      (click)="onDelAddress($event, item)"
                      type="button"
                      mat-button
                      l10nTranslate
                    >
                      assets.del
                    </button>
                  </mat-option>
                </mat-select>
              </div>
              <div class="f">
                <!-- here add dirty -->
                <mat-error
                  *ngIf="
                    validateForm.controls.address.dirty &&
                    validateForm.controls.address.hasError('required')
                  "
                >
                  {{ "assets.error.address" | translate: lang }}
                </mat-error>
              </div>
            </div>

            <div class="i">
              <div class="h">{{ "assets.amount" | translate: lang }}</div>
              <div class="b">
                <input
                  [textMask]="pointMask"
                  matInput
                  (blur)="onBlurAmount()"
                  type="text"
                  formControlName="amount"
                  placeholder="{{ 'assets.please_amount' | translate: lang }}"
                />
              </div>
              <!--
                    placeholder="{{'assets.please_amount' | translate:lang}}(最大提币限额:{{assets.withdraw.max}}/最小提币限额:{{assets.withdraw.min}})"
                  -->

              <div class="f">
                <mat-error
                  *ngIf="
                    validateForm.controls.amount.dirty &&
                    validateForm.controls.amount.hasError('required')
                  "
                >
                  {{ "assets.error.amount" | translate: lang }}
                </mat-error>
                <mat-error
                  *ngIf="
                    validateForm.controls.amount.dirty &&
                    validateForm.controls.amount.hasError('zero')
                  "
                >
                  {{ "assets.error.zero" | translate: lang }}
                </mat-error>
                <mat-error
                  *ngIf="
                    validateForm.controls.amount.dirty &&
                    validateForm.controls.amount.hasError('limit')
                  "
                >
                  {{ "assets.error.limitmax" | translate: lang }}
                </mat-error>
              </div>
            </div>

            <!-- <div class="i">
              <div class="h" l10nTranslate>assets.pay_pwd</div>
              <div class="b">
                <input
                  matInput
                  type="password"
                  (blur)="onBlurPayPwd()"
                  formControlName="payPwd"
                  placeholder="{{ 'assets.pay_pwd' | translate: lang }}"
                />
              </div>
              <div class="f">
                <mat-error
                  *ngIf="
                    validateForm.controls.payPwd.dirty &&
                    validateForm.controls.payPwd.hasError('required')
                  "
                >
                  {{ "assets.please_paypwd" | translate: lang }}
                </mat-error>
              </div>
            </div> -->

            <div class="i login df jcsb">
              <button
                type="button"
                (click)="toAddress()"
                matRipple
                class="address"
                mat-button
              >
                {{ "assets.withdraw_add_address" | translate: lang }}
              </button>
              <button
                matRipple
                class="withdraw"
                mat-button
                [disabled]="!validateForm.valid"
              >
                {{ "assets.withdraw_confirm" | translate: lang }}
              </button>
            </div>
          </div>
        </form>
      </mat-card-content>
    </mat-card>

    <mat-card style="padding-top:0;">
      <mat-card-title>
        {{ "assets.withdraw_history" | translate: lang }}
      </mat-card-title>
      <mat-card-content>
        <app-withdraw-history [search]="search"></app-withdraw-history>
      </mat-card-content>
    </mat-card>
  </div>
</div>
